<template>
	<view>
		<view class="status_bar"></view>
		<view class="header_created">
			<uni-nav-bar left-icon="back" :border="false" backgroundColor="transparent" title="签到" @clickLeft="backs">
			</uni-nav-bar>
			<view class="commission_details">
				<view style="height: 79rpx;">
					<text class="commission_title">已获取金钻数量</text>
					<text class="commission_btn">兑换商品</text>
				</view>
				<text class="commission_money">86382.28</text>
				<text class="commission_time">已连续签到1837天</text>
			</view>
			<view class="sign_list">
				<view class="sign_detaisl">
					<image src="../../../static/me/not.png" mode="aspectFill" class="badge-icon"></image>
					<view class="grid-text">+xx 金钻</view>
					<view class="grid-text1">第一天</view>
				</view>
				<view class="sign_detaisl">
					<image src="../../../static/me/yes.png" mode="aspectFill" class="badge-icon"></image>
					<view class="grid-text">+xx 金钻</view>
					<view class="grid-text1 yessign">第二天</view>
				</view>
				<view class="sign_detaisl">
					<image src="../../../static/me/yes.png" mode="aspectFill" class="badge-icon"></image>
					<view class="grid-text">+xx 金钻</view>
					<view class="grid-text1 yessign">第三天</view>
				</view>
				<view class="sign_detaisl">
					<image src="../../../static/me/yes.png" mode="aspectFill" class="badge-icon"></image>
					<view class="grid-text">+xx 金钻</view>
					<view class="grid-text1 yessign">第四天</view>
				</view>
				<view class="sign_detaisl">
					<image src="../../../static/me/yes.png" mode="aspectFill" class="badge-icon"></image>
					<view class="grid-text">+xx 金钻</view>
					<view class="grid-text1 yessign">第五天</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 返回上一页
			backs() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>
<style>
	.status_bar {
		height: var(--status-bar-height);
		background: rgba(252, 218, 34, 1);
	}

	.header_created {
		width: 100%;
		height: 351rpx;
		background-image: url(../../../static/me/bj.png);
		background-size: 100% 351rpx;
	}

	.commission_details {
		width: 699rpx;
		height: 304rpx;
		background-image: url(../../../static/me/bj_commission.png);
		background-size: 100% 100%;
		margin: auto;
		margin-top: 25rpx;
	}

	.commission_title,
	.commission_time {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #E8DECA;
		opacity: 1;
		padding-top: 43rpx;
		margin-left: 32rpx;
		display: block;
	}

	.commission_title {
		float: left;
	}

	.commission_btn {
		float: left;
		padding: 9rpx 18rpx;
		border: 1rpx solid #766F62;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #E8DECA;
		opacity: 1;
		border-radius: 7rpx;
		float: right;
		margin-top: 43rpx;
		margin-right: 32rpx;
	}

	.commission_money {
		font-size: 57rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFF8EB;
		text-shadow: 0px 3rpx 0px rgba(0, 0, 0, 0.16);
		opacity: 1;
		margin-top: 14rpx;
		margin-left: 32rpx;
		display: block;
		width: 100%;
	}
		.sign_list{
			margin-top: 43rpx;
			margin-left: 25rpx;
			margin-right: 25rpx;
		}
		.sign_detaisl{
			width: 137rpx;
			height: 208rpx;
			float: left;
		}
		.badge-icon{
			width: 61rpx;
			height: 61rpx;
			padding-top: 21rpx;
			padding-left: 38rpx;
			padding-bottom: 21rpx;
		}
		.grid-text{
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #453851;
			opacity: 1;
			text-align: center;
			padding-bottom: 10rpx;
		}
		.grid-text1{
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			opacity: 1;
			text-align: center;
		}
		.yessign{
			color: #000000;
		}
</style>
